<template>
    <i :class="iconClass" :style="iconStyle"></i>
</template>

<script>
const reg = /^el-icon[-\w]*/;

export default {
    name: 'FontIcon',
    props: {
        icon: String,
        weight: {
            type: [Number, String],
            default: 'normal'
        },
        size: {
            type: [Number, String],
            default: 'inherit'
        },
        color: {
            type: String,
            default: 'inherit'
        },
        // 主题
        family: {
            type: String,
            default: 'iconfont'
        },
        // 前缀
        prefix: {
            type: String,
            default: 'icon-'
        }
    },
    computed: {
        iconClass() {
            const { icon, prefix, family } = this;
            return [
                // 'app-icon',
                reg.test(icon) ? icon : `${family || ''} ${prefix || ''}${icon}`
            ]
        },
        iconStyle() {
            const { size, color, weight } = this;
            return { fontSize: typeof size === 'number' ? `${size}px` : size, color, fontWeight: weight }
        }
    }
}
</script>

<style lang="scss" scoped>
.app-icon {
    // width: 1em;
    // height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    color: inherit;
}
</style>
